<template>
	<view class="user">
		<!-- tab切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" tabItemStyle="width:33.3%" scrollStyle="border-bottom:none"
		 :tabBottomLine="100"></swiper-tab-head>
		<!-- 好友列表 -->
		<!-- <block v-for="(item,index) in list" :key="index">
			<user-item :item="item" :index="index"></user-item>
		</block>
 -->

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{'height': swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newsList" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block v-for="(item,indey) in items.list" :key="indey">
								<user-item :item="item" :index="indey"></user-item>
							</block>
							<!-- 上拉加载 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from "../../components/index/swiper-tab-head.vue"
	import userItem from "../../components/common/user-item.vue"
	import loadMore from "../../components/common/load-more.vue"
	import noThing from "../../components/common/no-thing.vue"

	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [{
						name: "互关",
						num: 10,
						id: "huguan"
					},
					{
						name: "关注",
						num: 20,
						id: "guanzhu"
					},
					{
						name: "粉丝",
						num: 9,
						id: "fensi"
					}
				],
				newsList: [{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isfollow: false
							}
						],
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isfollow: false
							}
						],
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isfollow: true
							},
							{
								userpic: "../../static/image/userpic/12.jpg",
								username: "昵称",
								age: 20,
								sex: 1,
								isfollow: false
							}
						],
					}
				]

			};
		},
		methods: {
			// 点击切换
			tabtap(index) {
				this.tabIndex = index
			},
			// 滑动
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			// 上拉加载更多
			loadmore(index) {
				if (this.newsList[index].loadtext !== "上拉加载更多") {
					return
				}
				let obj = {
					userpic: "../../static/image/userpic/12.jpg",
					username: "昵称",
					age: 20,
					sex: 0,
					isfollow: true
				}
				// 修改状态
				this.newsList[index].loadtext = "拼命加载中. . ."
				setTimeout(() => {
					this.newsList[index].list.push(obj)
					this.newsList[index].loadtext = "上拉加载更多"
					// this.newsList.loadtext = "人家是有底线的 Ծ ‸ Ծ"
				}, 1000)
			},
		},
		components: {
			swiperTabHead,
			userItem,
			loadMore,
			noThing
		},
		onLoad() {
			// 解决滚动高度问题
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperHeight = height
				}
			})
		},
		// 监听原生标题导航事件
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				// 点击了取消
				uni.navigateBack();
			}
		},
		// 监听搜索输入框事件
		onNavigationBarSearchInputChanged(e) {
			console.log(e.text)
		},
		// 监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			console.log(e.text)
		},
		mounted() {
			let a = document.getElementsByClassName('uni-page-head-hd')[0]
			a.style.display = 'none'
			let b = document.querySelectorAll(".uni-btn-icon")[1]
			b.style.height = "20px"
		}
	}
</script>

<style lang="scss" scoped>
</style>
